<template>
  <BasicModal
    width="900px"
    v-bind="$attrs"
    @ok="handleSubmint"
    :minHeight="300"
    okText="返回报警列表"
    @register="register"
    :title="modalTitle" >
    <div class="container border-btm">
      <p class="container-title">基本信息</p>
      <ul class="container-ul">
        <li>报警ID：{{modalData.AlarmID}}</li>
        <li>报警主题：{{modalData.AlarmTopic}}</li>
        <li>严重性：{{modalData.AlarmLevel_text}}</li>
        <li>报警类别：{{modalData.AlarmType_text}}</li>
        <li>报警状态：{{modalData.AlarmStatus_text}}</li>
        <li>关闭时间：{{modalData.EndTime}}</li>
        <li>故障描述：{{modalData.Description}}</li>
      </ul>
    </div>
    <div class="container">
      <p class="container-title">关注属性</p>
      <ul class="container-ul">
        <li v-for="(item,index) in modalData.Attention">{{item.Name}}： {{item.Unit }}</li>
      </ul>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModal } from '/@/components/Modal';
  import { computed, nextTick } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

  const props = defineProps({
    info: {
      type: Object,
      default: () => {},
    },
  });
  const modalTitle = ('详情')
  let modalData = computed(() => {
    return props.info.data;
  });
  const { createMessage } = useMessage();
  const { t } = useI18n();
  const emit = defineEmits(['submitSuccess']);
  const [register] = useModal();

  async function handleSubmint() {
    emit('submitSuccess', {});
  }
 
</script>

<style lang="less" scoped>
 .border-btm{
  border-bottom: 1px solid #C0C4CC;
  margin-bottom: 20px
 }
 .container-title{
  font-size: 14px;
  font-weight: 700;
  position: relative;
  padding-left: 8px
 }
 .container-title:before {
  content: "";
  background-color: #3796EC;
  width: 3px;
  height: 18px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
}

 .container-ul{
  display: flex;
  flex-wrap: wrap; 
 }
 .container-ul>li{
  width: 33%;
  line-height: 40px;
 }
</style>
